<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户管理</title>
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/js.js" ></script>
		<script src="../js/ajaxFunction.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<style>
			*{font-size:1em;}
			#nav ul li a, #nav ul li a:visited, #nav ul li a:link{font-size:1em;}
		</style>
		<script>
		$(function(){
			page = 1; // 当前页数
			totalpage = 1;// 总页数
			getUserInfo(1);
		});
		// 获取用户信息
		function getUserInfo(page){
			page = page > totalpage ? totalpage : page;
			page = page < 1 ? 1 : page;
			$.ajax({
				url : '../UserInfoServlet',
				method : 'post',
				data : {
					'operation' : 'getall',
					'page' : page,
					'locked' : $('input[name=locked]:checked').val(),
					'qq' : $('#qq').val(),
					'addressee' : $('#addressee').val()
				},
				dataType : 'json',
				success : function(json) {
					str = " <tr class=\"tb_tr_center\">" + 
					"			<th>ID</th>" + 
					"			<th>收件人</th>" + 
					"			<th>QQ</th>" + 
					"			<th>电话</th>" + 
					"			<th>创建日期</th>" + 
					"			<th>消费总额</th>" + 
					"			<th>欠款总额</th>" + 
					"			<th>默认地址</th>" + 
					"			<th>状态</th>" + 
					"			<th>操作</th>"
			    	"		</tr>";
					$.each(json, function(index, info) {
						if (info.total == null){
							locked = info.locked == '0' ? '正常' : '已锁定';
							lockit = info.locked == '0' ? '锁定' : '解锁';
							var oldTime = (new Date(info.createtime)).getTime();
						    var curTime = new Date(oldTime).Format("yyyy-MM-dd hh:mm:ss");
					    	str+="<tr class=\"tb_tr_center tb_font_lighter\">" + 
							"			<td>"+info.id+"</td>" + 
							"			<td>"+info.username+"</td>" + 
							"			<td>"+info.qq+"</td>" + 
							"			<td>"+info.tel+"</td>" + 
							"			<td>"+curTime+"</td>" + 
							"			<td>"+info.paymoney+"</td>" + 
							"			<td>"+info.lackmoney+"</td>" + 
							"			<td>"+info.addr+"</td>" + 
							"			<td><input type=\"button\" value=\""+locked+"\" class=\"greenbutton\"/></td>" + 
							"			<td class=\"operation\"><a href=\"javascript:void(0)\" onclick='altUser("+info.id+")'>&nbsp;修改&nbsp;</a><a href=\"\" onclick=\"delUser('"+info.id+"')\">&nbsp;"+
													"删除&nbsp;</a><a href=\"javascript:void(0)\" onclick=\"lockUser("+info.id+", "+info.locked+")\">&nbsp;"+lockit+"&nbsp;</a></td>" + 
							"		</tr>";
						}
						else{
							totalpage = info.total / 10;
							totalpage = totalpage > parseInt(totalpage) ? parseInt(totalpage) + 1 : totalpage;
							$('#total').empty();
							$('#total').append(info.total);
							$('#curpage').empty();
							$('#curpage').append(page);
							$('#totalpage').empty();
							$('#totalpage').append(totalpage);
						}
					});
					$('#userTable').empty();
					$('#userTable').append(str);
				}
			});
		}
		// 锁定用户
		function lockUser(id, lock){
			lock = lock == '0' ? '1' : '0';
			$.ajax({
				url : '../UserInfoServlet',
				method : 'post',
				data : {
					'operation' : 'lock',
					'id' : id,
					'lock' : lock
				},
				success : function() {
					getUserInfo(page);
				}
			});
		}
		// 删除用户
		function delUser(id){
			$.ajax({
				url : '../UserInfoServlet',
				method : 'post',
				data : {
					'operation' : 'del',
					'id' : id
				},
				success : function() {
					alert('删除成功!');
					getUserInfo(page);
				}
			});
		}
		// 修改用户
		function altUser(id){
			$.ajax({
				url : '../UserInfoServlet',
				method : 'post',
				data : {
					'operation' : 'getbyid',
					'id' : id
				},
				dataType:'json',
				success : function(info) {
					$('#altid').val(info.id);
					$('#altqq').val(info.qq);
					$('#altaddressee').val(info.username);
					$('#alttel').val(info.tel);
					$('#altaddr').val(info.addr);
					$('#first').click();
				}
			});
		}
		function postAltUser(){
			$.ajax({
				url : '../UserInfoServlet',
				method : 'post',
				data : {
					'operation' : 'altbyid',
					'id' : $('#altid').val(),
					'qq' : $('#altqq').val(),
					'addressee' : $('#altaddressee').val(),
					'tel' : $('#alttel').val(),
					'addr' : $('#altaddr').val()
				},
				dataType:'json',
				success : function(json) {
					if (json.msg == '成功'){
						$('#closeButton').click();
						getUserInfo(page);
					}
					else
						alert(json.msg);
				}
			});
		}
		</script>
	</head>
	<body>
	<!--
    	描述：头部导航栏
    -->
	<div class="header" style="font-size:1em;">
		<div class="fl">
			<span class="logo">商品库</span>
		</div>
		<div class="fl" id="nav">
			<ul>
				<li><a href="dashboard.html">首页</a></li>
				<li><a href="customers.html" class="ClickNav">用户管理</a></li>
				<li><a href="ordersManage.html">订单管理</a></li>
				<li><a href="todoManage.html">发货管理</a></li>
				<li><a href="configManage.html">系统管理</a></li>
			</ul>
		</div>
	</div>
	<div class="clear"></div>
	<div class="main border-bottom-gray"><span class="fontBold"><a href="" class="mapsite">首页</a></span>&nbsp;/&nbsp;
	<span class="fontBold"><a href="" class="mapsite">客户管理</a></span>&nbsp;/&nbsp;客户信息</div>
	<!--
    	描述：按条件搜索所选择的条件
    -->
	<div class="main choice">
		<input type="text" class="input_text" id="addressee" placeholder="请输入收件人"/>
		<input type="text" class="input_text" id="qq" placeholder="请输入QQ"/>
		<!-- <span class="fontBold fontsize_13">排序分类 : </span>
		<label class="radio">按时间 <input type="radio" name="search" value="time" checked><i></i></label> 
		<label class="radio">按消费<input type="radio" name="search" value="spending"><i></i></label>
		<label class="radio">按按欠款<input type="radio" name="search" value="arrears"><i></i></label>
		<label class="radio">余额<input type="radio" name="search" value="balance"><i></i></label>
		<span class="fontBold">&nbsp;&nbsp;&nbsp;排序规则 : </span>
		<label class="radio">降序 <input type="radio" name="sort" value="desc" checked><i></i></label> 
		<label class="radio">升序<input type="radio" name="sort" value="asc"><i></i></label> -->
		<span class="fontBold">&nbsp;&nbsp;&nbsp;用户状态 : </span>
		<label class="radio">全部 <input type="radio" name="locked" value="" checked><i></i></label> 
		<label class="radio">正常 <input type="radio" name="locked" value="0"><i></i></label> 
		<label class="radio">锁定<input type="radio" name="locked" value="1"><i></i></label>
		<input type="button" onclick="getUserInfo(1)" class="input_submit" value="查询"/>&nbsp;&nbsp;
	</div>
	<div class="clear"></div>
	<div class="main graybg">
		<table class="tb_wid" id="userTable">
			<tr class="tb_tr_center">
				<th>ID</th>
				<th>QQ</th>
				<th>创建日期</th>
				<th>消费总额</th>
				<th>欠款总额</th>
				<th>默认地址</th>
				<th>状态</th>
				<th>操作</th>
			</tr>
		</table>
		<!-- <div align="left" valign="top" class="fenye">
			<span id="total"></span>条数据 <span id="curpage"></span>/<span id="totalpage"></span> 页&nbsp;&nbsp;
			<a href="javascript:void(0)" target="mainFrame" onfocus="this.blur()" onclick="getUserInfo(1)">首页</a>&nbsp;&nbsp;
			<a href="javascript:void(0)" target="mainFrame" onfocus="this.blur()" onclick="getUserInfo(--page)">上一页</a>&nbsp;&nbsp;
			<a href="javascript:void(0)" target="mainFrame" onfocus="this.blur()" onclick="getUserInfo(++page)">下一页</a>&nbsp;&nbsp;
			<a href="javascript:void(0)" target="mainFrame" onfocus="this.blur()" onclick="getUserInfo(totalpage)">尾页</a>
       	</div> -->
	</div>
	<input id="first" type="button" style="display:none;" data-toggle="modal" data-target="#myModal"/>
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							用户信息
						</h4>
					</div>
					<div class="modal-body">
						<table style="font-size:1.2em;height:180px;margin: 0 auto;">
							<tr>
								<td>QQ号：</td>
								<td><input id="altid" type="hidden" /><input id="altqq" type="text" /></td>
							</tr>
							<tr>
								<td>收件人：</td>
								<td><input id="altaddressee" type="text" /><div style="float:right;color:red;">请勿填写陈女士或者英文名等</div></td>
							</tr>
							<tr>
								<td>联系电话：</td>
								<td><input id="alttel" type="text" /></td>
							</tr>
							<tr>
								<td>收件地址：</td>
								<td><input id="altaddr" type="text" /><div style="color:red;">省、市、区、街道乡镇（设置为默认地址，请写详细）</div></td>
							</tr>
						</table>
					</div>
					<div class="modal-footer">
						<button id="closeButton" type="button" class="btn btn-default" data-dismiss="modal">关闭
						</button>
						<button type="button" class="btn btn-primary" onclick="postAltUser()">
							确定
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
	</body>
</html>
